Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add settings and detail page to apps #47

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

klmhsb42
Copy link
Contributor

Features:

  • Filter Apps by Categories
  • Sort Apps (by A-Z or Categories)
  • Toggle Grid or List View
  • Detail page of apps (Load Screenshots from external, Load Readme from external, Click Links to Project or App, Share an App, Embed Link of your App in your website)
  • Manage all App Metadata in apps.json

Todos:

  • some bug fixes before merge (draft status)

Screenshots:

Bildschirmfoto vom 2024-10-26 11-55-42
Bildschirmfoto vom 2024-10-26 11-57-25
Bildschirmfoto vom 2024-10-26 11-58-34
Bildschirmfoto vom 2024-10-26 11-58-42-obfuscated
Bildschirmfoto vom 2024-10-26 11-58-54

@klmhsb42 klmhsb42 marked this pull request as draft October 26, 2024 13:37
@cyberb
Copy link
Member

cyberb commented Oct 30, 2024

I think if you center the filters horizontally it will look better.

@cyberb
Copy link
Member

cyberb commented Oct 30, 2024

Also I am mostly using mobile so you need to make sure it does not break it

@klmhsb42
Copy link
Contributor Author

Thanks for feedback. Sounds like you are ok with the feature ideas in general? So I will implement your comments and make bug fixes and get back to you for final approval.

@cyberb
Copy link
Member

cyberb commented Nov 4, 2024

Sounds like you are ok with the feature ideas in general?

Yes, it just never made to the top of the priority.
I would like to point out that one of the reasons I was not doing this on this web site as I always wanted to do it properly on its own store web where all the details would come from the app package itself (like on google play). There is already a store api it just does not have its own web.
Anyway if and when I get to the store web we can use what your are doing right so it will not be wasted.

@cyberb
Copy link
Member

cyberb commented Nov 4, 2024

Also grid switch is a bit odd comparing to the other two controls.

@cyberb
Copy link
Member

cyberb commented Nov 4, 2024

In general it is difficult to actually create something better and maintainable without using a proper web framework. On device for example (https://github.com/syncloud/platform/tree/master/www) I am using Vue.js v3 with element-plus component library (https://element-plus.org/en-US/component/overview.html) which gives a lot of power. I am not saying it has to be used right now but it would give you an easy access to a set of components, but it can be done later when moving to store web.

@klmhsb42
Copy link
Contributor Author

Hi @cyberb , I pushed a new version. I think it looks much better now and I also tested it with a smartphone. It's not perfect and certainly needs improvements but I think it's good enough for a first release. I also added a search function. Can you check it out?

I totally agree with you. Maybe we can proceed as follows:

  1. First take this version
  2. Replace the app JSON in https://github.com/syncloud/release/blob/master/index-v2 with the new JSON and then completely remove it from Syncloud.org and make some changes in Syncloud.org repo to access it to have only single source of truth
  3. Then add the new app store functions in the platform app and also rewrite them with vue.js functions
  4. Then transfer the vue.js functions to Syncloud.org

@klmhsb42 klmhsb42 marked this pull request as ready for review November 23, 2024 16:19
@cyberb
Copy link
Member

cyberb commented Nov 23, 2024

image

I would say these days you do not need to say "Filter Category" or "Sort" it is all intuitive and will look better without them.
Also all in one horizontal line would be better on this wide view.

@cyberb
Copy link
Member

cyberb commented Nov 23, 2024

image

I think this one is good on the wide view.

image

But on mobile view it is not so good, can we make it look the same as on wide view (on the same line)?

@cyberb
Copy link
Member

cyberb commented Nov 23, 2024

image

I think these days sites try to be simpler and have a single scroll (the main one) by not limiting vertical size of any component, this would have less confusion of what to scroll by placing the mouse or a finger in different areas of the screen.
In simple implementation that usually means filter, scroll down, then scroll up to see filters again, but that can be fixed by freezing the filter controls at the top (again not very convenient thing as it takes part of your screen which is very annoying).

So I would prefer filters at the top of the page which are moved away with the page as you scroll, simple and very practical (in my mind)

@cyberb
Copy link
Member

cyberb commented Nov 23, 2024

image

Colors are different, I think the top one is the official color we use, let's stick to that.
There is nothing worse than inconsistent colors on a website (I am not saying I have not done this mistake myself, but it is still a mistake :) )

@klmhsb42
Copy link
Contributor Author

I would say these days you do not need to say "Filter Category" or "Sort" it is all intuitive and will look better without them. Also all in one horizontal line would be better on this wide view.

Removed and in one line.

I think this one is good on the wide view.

But on mobile view it is not so good, can we make it look the same as on wide view (on the same line)?

Also in mobile on same line now.

I think these days sites try to be simpler and have a single scroll (the main one) by not limiting vertical size of any component, this would have less confusion of what to scroll by placing the mouse or a finger in different areas of the screen. In simple implementation that usually means filter, scroll down, then scroll up to see filters again, but that can be fixed by freezing the filter controls at the top (again not very convenient thing as it takes part of your screen which is very annoying).

So I would prefer filters at the top of the page which are moved away with the page as you scroll, simple and very practical (in my mind)

Done. Just one scroll bar now.

Colors are different, I think the top one is the official color we use, let's stick to that. There is nothing worse than inconsistent colors on a website (I am not saying I have not done this mistake myself, but it is still a mistake :) )

Color is now corrected for buttons.

@cyberb
Copy link
Member

cyberb commented Nov 29, 2024

Hi, all good!
Can you fix this last minor thing, alignment on left side is not right?
Screenshot from 2024-11-29 08-37-35

@klmhsb42
Copy link
Contributor Author

klmhsb42 commented Dec 1, 2024

Hi @cyberb , the details usually take the most time. It should now be pixel accurate. I hope it works.
Bildschirmfoto vom 2024-12-01 11-53-31

@cyberb
Copy link
Member

cyberb commented Dec 2, 2024

ok design is good, but functionality is a bit strange, category and name filter do not play well together.
Kooha-2024-12-02-21-04-23.webm

@klmhsb42
Copy link
Contributor Author

@cyberb should work better now

@cyberb
Copy link
Member

cyberb commented Jan 2, 2025

Sorry forgot about this PR, everything seems to work.
Couple things about the code:

  1. Browser throws an error
    image
  2. Can you format app.js/app-details.js files please as indentation is very inconsistent?

@klmhsb42 klmhsb42 marked this pull request as draft January 11, 2025 11:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants